<template>
  <div class="list">
    <sorter @selectSorter="selectSorter"></sorter>
    <scroll :pullDownRefresh="pullDownRefresh"
            :pullUpLoad="pullUpLoad"
            @pullingUp="loadMore"
            :data="shoppingList"
            ref="scroll">
      <goods-list :list="shoppingList"></goods-list>
    </scroll>
    <div class="shopping-loading" v-show="!shoppingList.length">
      <loading></loading>
    </div>
  </div>
</template>

<script>
  import sorter from '@/components/sorter/sorter';
  import goodsList from '@/components/goods-list/goods-list';
  import scroll from '@/components/scroll/scroll';
  import loading from '@/components/loading/loading';
  export default {
    props: {
      pullDownRefresh: {
        type: Boolean,
        default: false // 是否可以下拉加载
      },
      pullUpLoad: {
        type: Boolean,
        default: true // 是否可以下拉加载
      },
      shoppingList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    name: '',
    data() {
      return {
      }
    },
    methods: {
      // 上拉加载事件触发
      loadMore() {
        this.$emit('loadMore');
      },
      // 打开上拉
      openPullUp() {
        this.$refs.scroll.openPullUp();
      },
      // 关闭上拉
      closePullUp() {
        this.$refs.scroll.closePullUp();
      },
      // 上拉刷新完成
      finishPullUp() {
        this.$refs.scroll.finishPullUp();
      },
      // 排序条件切换
      selectSorter({key,status}) {
        this.$emit('selectSorter',{key:key,status:status})
      }
    },
    components: {
      sorter,
      goodsList,
      scroll,
      loading
    }
  }
</script>

<style scoped lang="less">
  .list{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    .scroll{
      position: absolute;
      top:50px;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
    }
  }
  .shopping-loading{
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding: 5px 0;
    background-color: #fff;
    padding-top: 200px;
  }
</style>
